<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="Expires" content="0" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Cache-control" content="no-cache" />
    <meta http-equiv="Cache" content="no-cache" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <!-- favicon -->
    <link rel="shortcut icon" th:href="@{/static/main/img/favicon.png}" type="image/x-icon" />

    <!-- title -->
    <title th:if="${systemTitle}" th:text="${modifyPwd}+${systemTitle}"></title>
    <title th:unless="${systemTitle}" th:text="${modifyPwd}+' | HZERO'"></title>

    <link th:href="@{/static/main/css/bootstrap-3.3.7/css/bootstrap.min.css}" rel="stylesheet" />
    <link th:href="@{/static/main/css/modify_password.css}" rel="stylesheet" />

    <script th:src="@{/static/main/js/jquery.min.js}"></script>
    <script th:src="@{/static/main/js/jsencrypt.min.js}"></script>
    <script th:src="@{/static/main/js/jquery.validate.min.js}"></script>
    <script th:src="@{/static/main/js/password-modify.js}"></script>

    <template id="templateData"
        th:attr="data-copyright=${copyright},data-loginUrl=@{/login(template=${template})},data-modifyPwd=${modifyPwd},data-optionSucceeded=${optionSucceeded},data-optionFailed=${optionFailed},data-checkAccount=${checkAccount},data-resetPassword=${resetPassword},data-complete=${complete},data-validateAccountErr=${validateAccountErr},data-validateAccountFailed=${validateAccountFailed},data-userNameNotNull=${userNameNotNull},data-findAccount=${findAccount},data-captchaPlaceholder=${captchaPlaceholder},data-captchaMessage=${captchaMessage},data-cancel=${cancel},data-nextStep=${nextStep},data-preStep=${preStep},data-validatePwdRepeat=${validatePwdRepeat},data-captchaLoadErrgMsg=${captchaLoadErrgMsg},data-getCaptcha=${getCaptcha},data-newPwdCanNotNul=${newPwdCanNotNul},data-resetPwdErr=${resetPwdErr},data-resetPwd=${resetPwd},data-pwdRepeatMsg=${pwdRepeatMsg},data-resetPwdSucceeded=${resetPwdSucceeded},data-loadingNow=${loadingNow},data-pwdRepeat=${pwdRepeat},data-validateLength=${validateLength},data-validateLower=${validateLower},data-validateUpper=${validateUpper},data-validateDigit=${validateDigit},data-validateSpecial=${validateSpecial},data-atLeast=${atLeast},data-validateUserName=${validateUserName},data-orgId=${session.organizationId},data-publicKey=${session.publicKey},data-captchaLoadingMsg=${captchaLoadingMsg},data-captchaLoadErrgMsg=${captchaLoadErrgMsg},data-forceMobileVerify=${forceCodeVerify},data-phone=${phone},data-phoneMsg=${phoneMsg}">
    </template>

</head>

<body>
    <div id="app">
        <div class="password-container password-layout">
            <div class="password-layout-header">
                <div class="logo">
                    <a th:href="@{/login(template=${template})}">
                        <img height="24px" th:src="${logoUrl}?${logoUrl}:'/oauth/static/main/img/logo.png'"
                            alt="HZERO" />
                    </a>
                </div>
            </div>
            <div class="password-layout-content">
                <div class="password-tab">
                    <div class="password-steps">
                        <div class="password-steps-item 'password-steps-item-process'"
                            th:classappend="${param.currentStep != null ? param.currentStep[0] : '0'} != '0' ? 'password-steps-item-finish' : ''">
                            <div class="password-steps-item-icon">
                                <span class="password-steps-icon"
                                    th:text="${param.currentStep != null ? param.currentStep[0] : '0'} != '0'?'√':'1'">1</span>
                            </div>
                            <div class="password-steps-item-content">
                                <div class="password-steps-item-title" th:text="${resetPassword}">重置密码</div>
                            </div>
                        </div>
                        <div class="password-steps-item"
                            th:classappend="${param.currentStep != null ? param.currentStep[0] : '0'} == '1' ? 'password-steps-item-process' : 'password-steps-item-wait'">
                            <div class="password-steps-item-icon">
                                <span class="password-steps-icon">2</span>
                            </div>
                            <div class="password-steps-item-content">
                                <div class="password-steps-item-title" th:text="${complete}">完成</div>
                            </div>
                        </div>
                    </div>

                    <div class="password-spin-nested-loading">
                        <div class="password-spin-container">

                            <form id="formResetPassword"
                                th:if="${param.currentStep != null ? param.currentStep[0] : 0} == 0">
                                <div class="password-form">
                                    
                                    <div class="password-form-item">
                                        <span class="password-form-item-children">
                                            <span class="password-form-item-children-prefix">
                                                <div class="password-input-content">
                                                    <span class="password-form-input-prefix">
                                                        <i class="glyphicon glyphicon-user"></i>
                                                    </span>
                                                    <div class="form-group password-form-item-children-input">
                                                        <input name="password" id="password" type="password"
                                                            th:placeholder="${resetPwd}"
                                                            class="form-control password-form-input">
                                                        <span class="glyphicon glyphicon-eye-close look"></span>
                                                    </div>
                                                </div>
                                            </span>
                                            <div class="password-validate popover" style="display:block"></div>
                                        </span>
                                    </div>
                                    <div class="password-form-item">
                                        <span class="password-form-item-children">
                                            <span class="password-form-item-children-prefix">
                                                <div class="password-input-content">
                                                    <span class="password-form-input-prefix">
                                                        <i class="glyphicon glyphicon-user"></i>
                                                    </span>
                                                    <div class="form-group password-form-item-children-input">
                                                        <input name="passwordRepeat" id="passwordRepeat" type="password"
                                                            class="form-control password-form-input"
                                                            th:placeholder="${pwdRepeat}">
                                                        <span class="glyphicon glyphicon-eye-close look"></span>
                                                    </div>
                                                </div>
                                            </span>
                                        </span>
                                    </div>
                                    <div class="password-form-item" th:if="${forceCodeVerify}">
                                        <span class="password-form-item-children">
                                          <span class="" th:classappend="${param.phone != null ? param.phone[0] : ''} == '' ? 'password-form-item-children-prefix' : ''">
                                            <div class="password-input-content">
                                                <span class="password-form-input-prefix" th:if="${param.phone != null ? param.phone[0] : ''} == ''">
                                                    <i class="glyphicon glyphicon-earphone"></i>
                                                </span>
                                              <div class="form-group" th:classappend="${param.phone != null ? param.phone[0] : ''} == '' ? 'password-form-item-children-input' : ''">
                                                <input name="phone" id="phone" type="text"
                                                       th:value="${param.phone != null ? param.phone[0] : ''} != ''?${secCheckPhonePhone}+':'+${phone}:''" 
                                                       th:disabled="${param.phone != null ? param.phone[0] : ''} != ''"
                                                       class="form-control password-form-input" th:placeholder="${phonePlaceholder}">
                                              </div>
                                    </div>
                                    </span>
                                    </span>
                                </div>
                                    <div class="password-form-item" th:if="${forceCodeVerify}">
                                        <div class="password-form-item-control">
                                          <span class="password-form-item-children">
                                            <div class="password-row">
                                              <div class="password-col-12">
                                                <span class="password-form-item-children-prefix">
                                                  <div class="password-input-content">
                                                    <span class="password-form-input-prefix">
                                                      <i class="glyphicon glyphicon-pencil"></i>
                                                    </span>
                                                    <div class="form-group password-form-item-children-input">
                                                      <input name="phoneCaptcha" id="phoneCaptcha" type="text"
                                                        class="form-control password-form-input" th:placeholder="${captchaLoadingMsg}">
                                                    </div>
                                                  </div>
                                                </span>
                                              </div>
                                              <div class="password-col-12">
                                                <button class="btn btn-flat btn-raised password-form-button-captcha"
                                                  th:text="${captchaLoadingMsg}"></button>
                                              </div>
                                            </div>
                                          </span>
                                        </div>
                                      </div>
                                    <div class="password-form-item">
                                        <span class="password-form-item-children">
                                            <button type="submit"
                                                class="btn btn-primary btn-raised password-btn password-btn-confirm-account"
                                                th:text="${complete}"></button>
                                        </span>
                                    </div>
                                </div>
                            </form>

                            <form id="resetPasswordSuccess" class="password-success"
                                th:if="${param.currentStep != null ? param.currentStep[0] : ''} == 1">
                                <div class="password-form">
                                    <img src="/oauth/static/main/img/illustrate_success.png" />
                                    <p class="finish-fonts" th:text="${resetPwdSucceeded}"></p>
                                    <div class="password-form-item">
                                        <span class="password-form-item-children">
                                            <button type="submit" class="btn btn-raised button-login"
                                                th:text="${loadingNow}"></button>
                                        </span>
                                    </div>
                                </div>
                            </form>

                        </div>
                    </div>
                </div>
            </div>
            <div class="password-layout-footer"
                th:utext="${copyright}?${copyright}:'Copyright © The HZERO Author®.All rights reserved.'">
            </div>
        </div>
    </div>
    <div class="password-notification"></div>
</body>

</html>